<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
@import '../assets/styles/common/lib-mixins.less';
@import '../assets/styles/common/common.less';

html, body{
  background-color: #F6F6F6;
}
.container{
  position: relative;
  padding: 30px 0 0;
  background-color: #F6F6F6;
}

.pay-head{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 184px;
  background-color: #FFDA44;
}
.pay-wrap{
  position: relative;
  z-index: 10;
  margin: 0 20px;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 40px;
}

.pay-desc{
  position: relative;
  color: #000;
  .px2px(font-size, 30PX);
  height: 100px;
  border-bottom: 1PX solid #CECECE;
  .flex-base();

  .pay-status{
    position: absolute;
    z-index: 1;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    .px2px(font-size, 26PX);

    &.on-line{
      color: #84d945;
    }

    &.un-line{
      color: #ddd;
    }
  }
}
.pay-label{
  height: 90px;
  padding: 0 30px;
  box-sizing: border-box;
  color: #000;
  .px2px(font-size, 26PX);
  border-bottom: 1PX solid #CECECE;
  .flex-row-start;

  .inter-name{
    margin-left: 30px;
    color: #0F7FE5;
    .px2px(font-size, 26PX);
  }
}

.pay-list{
  margin-top: 15px;
  list-style: none;
  padding: 30px 0 50px;
  box-sizing: border-box;
  .flex-base(@flex-flow: row wrap; @justify-content: flex-start;);

  li{
    width: 30%;
    padding: 10px 0 20px;
    margin: 25px 0 0 15px;
    background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
    color: #666;
    border: 1PX solid #bbb;
    .flex-column-center;

    &.chos-active{
      color: #0078E5;
      border: 4PX solid #0078E5;
      // box-shadow: 0 0 8px 5px rgba(0, 0, 0, 0.2);

      .money-num, .time-num{
        color: #508AF6;
      }
    }

    .money-num{
      color: #eb7433;
      .px2px(font-size, 28PX);
    }

    .time-num{
      margin-top: 5px;
      color: #a5a5c2;
      .px2px(font-size, 24PX);
    }
  }
}

.pay-tips{
  margin: 30px 40px 0;
  padding: 20px 10px;
  .px2px(font-size, 24PX);
  color: #fff;
  background-color: #ACB3B9;
  border-radius: 8px;
  .flex-base(@align-items: flex-start);
  
  .tips-icon{
    width: 19px;
    height: 20px;
    background-image: url(../assets/images/icons/tips-icon.png);
    margin-right: 5px;
  }
}


.sure-btn{
  margin: 30px;
  height: 88px;
  line-height: 88px;
  text-align: center;
  .px2px(font-size, 28PX);
  border-radius: 5px;
  color: #fff;
  background-color: #ddd;
  border-radius: 9999px;

  &.active{
    background-color: #FFDA44;
    color: #000;
  }
}
</style>
<template>
  <div class="container">
    <div class="pay-head"></div>
    <div class="pay-wrap">
      <div class="pay-desc">
        <p>{{deviceInfo.merchantName}}</p>
        <p v-if="deviceInfo.onlineState.code === 11" class="pay-status on-line">在线</p>
        <p v-if="deviceInfo.onlineState.code === 10" class="pay-status un-line">离线</p>
      </div>
      <p class="pay-label">已选端口<span class="inter-name">已选择{{chosDevice}}端口</span></p>
      <p class="pay-label">选择金额</p>
      <ul class="pay-list">
        <template v-for="(item, index) of payLst"> 
          <li :key="index" :class="{'chos-active': chosIndex === index}" @click="chosPay(index)">
            <p class="money-num">{{item.amount.amount}}元</p>
            <p class="time-num">{{item.time}}分钟</p>
          </li>
        </template>
      </ul>
    </div>
    <p class="pay-tips">
      说明： 使用过程中，负载过大引起的意外中断、插座被人拔出等情况，使用剩余金额不予退还。
    </p>
    <div class="sure-btn" :class="{'active': isChos}" @click="commitNext">下一步</div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import wcPay from '../assets/scripts/common/wcPay'
export default {
  data() {
    return {
      deviceInfo: null,   // 设备信息
      chosDevice: '',   // 选择的设备
      chosIndex: '',    // 选择索引
      isChos: false,    // 是否已经选择一个
      // payLst: [{
      //   money: '1.00',
      //   time: '120'
      // }, {
      //   money: '0.01',
      //   time: '120'
      // }, {
      //   money: '1.00',
      //   time: '120'
      // }, {
      //   money: '1.00',
      //   time: '120'
      // }]
      payLst: null
    }
  },
  computed: {
    ...mapGetters(['getUsrInfo', 'getOpenId'])
  },
  async mounted() {
    this.chosDevice = this.$route.query.device
    this.deviceInfo = {
      merchantName: this.$route.query.mname,
      onlineState: this.$route.query.state
    }
    let res = await this.request('reqPayLst', {imei: this.$route.query.imei})
    this.$store.commit('updateLoadingStatus', false)
    this.payLst = res.data[0].item
    console.log(res.data[0].item)
  },
  methods: {
    chosPay(index) {    // 选择支付
      this.chosIndex = index
      this.isChos = true
    },
    async commitNext() {    // 提交下一步
      if (!this.isChos) return
      let chosItem = this.payLst[this.chosIndex]
      console.log(chosItem.amount.amount)
      let res = await this.request('reqOrder', {
        amount: chosItem.amount.amount,
        time: chosItem.time,
        imei: this.$route.query.imei,
        portIndex: this.chosDevice
      })
      this.$store.commit('updateLoadingStatus', false)
      let wcData = {
        appId: res.data.appId,
        nonceStr: res.data.nonceStr,
        package: res.data.package,
        paySign: res.data.sign,
        signType: res.data.signType,
        timeStamp: res.data.timeStamp
      }
      wcPay(wcData, () => {
        if (this.getUsrInfo.registed) {
          // 路由跳转
          this.$router.push({path: '/'})
        } else {
          this.$router.push({path: 'register'})
        }
      })
    }
  }
}
</script>
